<template id="main">
	<div class="main_personal">

		<!--头部-->
		<div class="main_header">
			<dl>
				<dt>
					<div class="edit_photo" style="height: 91px;">
		 <div id="box"  >
			<div style="">
	        <div style="width: 75px;
    height: 75px;
    margin: 0 auto;
    overflow: hidden;border-radius: 41px;background: white;"><img style="background-size: cover;
    width: 100%;" :src="image" alt=""></div>
	
			<input  id="file" type="file"  @change="imageChange()" style="    width: 100px;
    position: absolute;
    opacity: 0;
    top: -3px;
    left: 36%;
    height: 50px;">
			</div>
		
		</div>	
		</div>
				</dt>
				<dd>
					<p>{{center.username}}</p>

					<div class="main_revise">
						<router-link to="/edit_profile"><span>修改资料</span><img src="../../assets/images/main/revise_03.png" /></router-link>

					</div>

				</dd>
			</dl>

			<!--我的教练/代金券/课程券-->
			<div class="main_nav">
				<ul>
					<li @click.stop="mainCoach">

						<p>{{center.myCoachCount}}</p><span>我的教练</span>
					</li>
					<li>
						<div @click.stop="nextStep">
							<p>{{center.couponCount}}</p><span>优惠券</span></div>
					</li>

				</ul>

			</div>
			<!--我的教练/代金券/课程券结束-->

		</div>
		<!--头部结束-->

		<!--我的钱包-->
		<div class="main_detail">
			<div class="main_detail_left">
				<router-link :to="{path:'/main_money',query:{money:center.userWallet.money}}"><img src="../../assets/images/main/my_money.png" />
					<p>我的钱包</p>
				</router-link>
			</div>
			<div class="main_detail_right">
				<span>单次充值满</span>
				<font>1000</font>,<span>立返</span>
				<font>10%</font>
			</div>
		</div>
		<!--我的钱包结束-->

		<!--我的订单-->
		<div class="my_order">
			<div class="my_dota">
				<p>我的订单</p>
				<div class="my_dota_right">
					<!-- <router-link to="/doudle_routing"><span>查看全部订单</span><img src="../../assets/images/main/my_27.png" /></router-link> -->
				</div>
			</div>
		</div>
		<!--我的订单结束-->

		<!--未支付/已完成评价/未完成评价/共享瑜伽馆-->

		<div class="main_pay">
			<ul>
				<li @click.stop="pay">
					<img src="../../assets/images/main/my_20.png" />
					<p>待支付</p>
				</li>
				<li @click.stop="complete">

					<img src="../../assets/images/main/my_14.png" />
					<p>未完成</p>

				</li>
				<li @click.stop="rough">

					<img src="../../assets/images/main/my_17.png" />
					<p>已完成</p>

				</li>
				<li @click.stop="assess">

					<img src="../../assets/images/main/my_11.png" />
					<p>待评价</p>

				</li>
			</ul>
		</div>

		<!--未支付/已完成评价/未完成评价/共享瑜伽馆结束-->

		<!--成为教练/购物车/绑定邀请码/联系客服-->

		<div class="main_bunding">
			<ul>
				<li>
					<router-link to="/become_coach">
						<p>成为教练</p>
						<img src="../../assets/images/main/my_27.png" />
					</router-link>
				</li>
				<!--<li>
					<router-link to="/shop_cart">
						<p>我的购物车</p>
						<img src="../../assets/images/main/my_27.png" />
					</router-link>
				</li>-->
				<!--<li>
					<router-link to="/invitation_code">
						<p>绑定邀请码</p>
						<div class="main_active">
							<div class="main_active_kile"><img src="../../assets/images/main/my_31.png" /><span>我的邀请码:{{center.userWallet.userid}}</span></div>
							<img src="../../assets/images/main/my_27.png" />
						</div>
					</router-link>
				</li>-->
				<li>
					<router-link to="/about_us">
						<p>关于我们</p>
						<img src="../../assets/images/main/my_27.png" />
					</router-link>
				</li>
				<li  style="border-bottom:1px solid #eeeeee;">
					<router-link to="/contact_service">
						<p>联系客服解答投诉建议</p>
						<img src="../../assets/images/main/my_27.png" />
					</router-link>
				</li>
			</ul>
		</div>
		<!--成为教练/购物车/绑定邀请码/联系客服结束-->
       
	   <!-- 退出登陆按钮 -->
       <div class="main_quit">
	<button  @click.stop="btn">退出登录</button>
		</div>
<div class="footer_router">

		<ul>
			<li @click="HeightL(0)">
				<router-link to="/about_class">
					<img v-if="index=='1'||index=='2'" src="../../assets/images/footer_icon/yueke_gray.png" />
					<img v-if="index=='0'" src="../../assets/images/footer_icon/yueke_green.png" />
					<p>约课</p>
				</router-link>
			</li>
			<li @click="HeightL(1)" @click.stop="collageAdd">
				<router-link to="/collage">
					<img v-if="index=='0'||index=='2'" src="../../assets/images/footer_icon/dingdan_gray.png"/>
					<img v-if="index=='1'" src="../../assets/images/footer_icon/dingdan_green.png"/>
					<p>拼团</p>
				</router-link>
			</li>
			<li @click="HeightL(2)"  @click.stop="userAdd">
				<router-link to="/main">
					<img v-if="index=='1'||index=='0'" src="../../assets/images/footer_icon/me_gray.png" />
					<img v-if="index=='2'" src="../../assets/images/footer_icon/me_green.png" />

					<p>我的</p>
				</router-link>
			</li>
		</ul>

	</div>
	</div>
</template>

<script>
// import footer from '@/components/footer'
	export default {
		name: 'App',
  components:{
	// "v-footer":footer
  },
		data() {
			return {
				invite: [],
				coachid: this.$route.query.coachid,
				userid: 100343,
				code: 1,
				math: '',
				center:[
				{
					money:''
				}
				],
				money:'',
				image:'',
				newimg:'',
				index: '2',
				sessionid:'',

			} 
		},
		created() {
//				let SESSION_ID = JSON.parse(window.sessionStorage.getItem('SESSION_ID'));
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				let obj = {
					sessionid: SESSION_ID.sessionid,
					userid: SESSION_ID.user.id,
				};
				let _this = this
				let qs = require('qs');
				this.$axios.post("/yujia/user/showPersonalCenter", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {

					console.log(response.data.code)
					if(response.data.code == 9){
						window.localStorage.clear()
						_this.$router.push('/forgot_password')
					}


					_this.center = response.data.data

				}).catch(function(error) {
					console.log(error);
				});
		},
		mounted(){
			this.newimgs()
		},
		methods: {
			HeightL: function(index) {
				this.index = index
			},
			collageAdd(){
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				if(SESSION_ID == null){
					mui.alert('请登录')
						var collage
						this.$router.push({
							
						path: "/forgot_password",
						query:{
							collage:'collage'
						}
					})
				}else{
				this.$router.push({
						path:'/collage'
					})	
				}
			},
			userAdd() {
				//let SESSION_ID = JSON.parse(window.sessionStorage.getItem('SESSION_ID'));
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				if(SESSION_ID == null){
					mui.alert('请登录')
						var main
						this.$router.push({
					    
						path: "/forgot_password",
						query:{
							main:'main'
						}
					})
				}else{
				this.$router.push({
						path:'/main'
					})	
				}
			},
			newimgs:function(){
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				// console.log(SESSION_ID.user.phone)
				let _this = this
				let obj = {
						sessionid: SESSION_ID.sessionid,
						userid: SESSION_ID.user.id,
				};
				let qs = require('qs');
				this.$axios.post("/yujia/user/showPersonalMessage", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					if(response.data.code == 9){
						window.localStorage.clear()
						_this.$router.push('/forgot_password')
					}
					_this.newimg=response.data.data.user.head_image
						if(_this.image == null){
				   			_this.image=SESSION_ID.user.head_image
						}else{
							setTimeout(()=>{
								// console.log(_this.newimg)
								_this.image=_this.newimg
							},50)
						}  
					// console.log(_this.newimg)
				}).catch(function(error) {
					console.log(error);
				})			
			},
			nextStep() {
				this.$router.push({
					path: '/coupon',
					query: {
						status: '2'
					}
				})
			},
			pay() {
				this.$router.push({
					path: '/doudle_pay',
					query: {}
				})
			},
			complete() {
				this.$router.push({
					path: '/doudle_air_complete',
					query: {}
				})
			},
			rough() {
				this.$router.push({
					path: '/doudle_already_complete',
					query: {}
				})
			},
			assess() {
				this.$router.push({
					path: '/doudle_assess',
					query: {}
				})
			},
			mainCoach() {
				this.$router.push({
					path: "/main_coach",
					query: {
						coachid: this.$route.query.coachid
					}
				})
			},
			btn:function(){
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				window.localStorage.removeItem('sessiond')
				mui.alert("退出登录成功")
				this.$router.push({
				path:'/forgot_password',
				query:{}
				})
		
			},
		
			

		}
	}
</script>
<style type="text/css">
	 .router-link-active {
		color: #2D8F90!important;
	}
</style>
<style scoped>
	@import "../../assets/css/main.css";
	@import "../../assets/css/footer_router.css";
	 
</style>
